<template>
	<view class="echarts-layout">
		<l-echart ref="chartRef"></l-echart>
	</view>
</template>

<script setup>
	import { onMounted, reactive, ref } from 'vue'
	import * as echarts from 'echarts/core'
	import { LineChart } from 'echarts/charts'
	import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components'
	// 标签自动布局，全局过渡动画等特性
	import { LabelLayout, UniversalTransition } from 'echarts/features'
	// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
	import { CanvasRenderer } from 'echarts/renderers';
	const chartRef = ref(null)
	// 注册必须的组件
	echarts.use([
		LegendComponent,
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		TransformComponent,
		LineChart,
		LabelLayout,
		UniversalTransition,
		CanvasRenderer
	]);
	const chartData = reactive({
		option: {
			tooltip: {
				trigger: 'axis'
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: [],
				axisLabel: {
					rotate: 45,// 旋转角度
				}
			},
			yAxis: {
				type: 'value',
			},
			series: [{
				data: [],
				type: 'line',
				smooth: true
			}],
			grid: {
				left: '0rpx',
				top: '20rpx',
				bottom: '20rpx',
				containLabel: true
			}
		}
	})
	const props = defineProps({
		option:{
			type:Object,
			default:{}
		}
	})
	// 刷新图表数据
	const reloadData = (xData,yData)=>{
		chartData.option.series[0].data = yData
		chartData.option.xAxis.data = xData
		chartRef.value.setOption(chartData.option)
	}
	onMounted(() => {
		chartRef.value.init(echarts, chart => {})
	})
	defineExpose({
		reloadData
	})
</script>

<style lang="scss" scoped>
	.echarts-layout {
		width: 100%;
	}
</style>